<template>
  <div>
    <el-input v-model="text" @keydown.enter="saveHandler(addCase, $event)"></el-input>
    <div v-for="(item, index) in data" :key="item.title">
      <div
        @mouseenter="enterHandler(item)"
        @mouseleave="leaveHandler(item)"
        :class="{ acitve: item.isEnter }"
      >
        <div>
          <el-checkbox v-model="item.isComp"></el-checkbox>
          <span>{{ item.title }}</span>
          &nbsp;&nbsp;&nbsp;
          <span>{{ index }}</span>
        </div>
        <div>
          <el-button v-show="item.isEnter" type="danger" @click="saveHandler(deleteItem, item.id)">
            删除
          </el-button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <el-checkbox v-model="allCheck" @change="allCheckChange"></el-checkbox>
        <span>已完成{{ data.filter(item => item.isComp).length }}/全部{{ data.length }}</span>
      </div>
      <div>
        <el-button type="danger" @click="saveHandler(deleteComp)">清除已完成任务</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElInput, ElCheckbox, ElButton } from "element-plus";
import { ref, reactive, onMounted } from "vue";
const text = ref("");

let data = ref([]);
const allCheck = ref(false);
const isActive = ref(false);
onMounted(() => {
  data.value = JSON.parse(localStorage.getItem("data") ?? "[]");
});
const enterHandler = item => {
  item.isEnter = true;
};
const leaveHandler = item => {
  item.isEnter = false;
};
const addCase = e => {
  console.log(text.value.trim());
  if (!text.value.trim()) return;
  data.value.push({
    title: text.value,
    isComp: false,
    id: Date.now(),
    isEnter: false,
  });

  text.value = "";
};
const saveHandler = (cb, ...arg) => {
  cb(arg);
  localStorage.setItem("data", JSON.stringify(data.value));
};
const deleteItem = id => {
  let index = data.value.findIndex(item => item.id === id);
  data.value.splice(index, 1);
};
const deleteComp = () => {
  data.value = data.value.filter(item => !item.isComp);
  data.value.length === 0;
  allCheck.value = false;
};
const allCheckChange = e => {
  data.value.forEach(item => (item.isComp = e));
};
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.acitve {
  background-color: #ccc;
}
</style>
